@import "base";

.center-main {
  position: relative;
  padding-bottom: 30px;

  .bgc1{
    background: -webkit-linear-gradient(right, #98ADF6, #7E82F6);
  }

  .bgc2{
    background: -webkit-linear-gradient(right, #47485C, #39394C);
  }

  //*****头部*****
  .header {
    //background: -webkit-linear-gradient(right, #98ADF6, #7E82F6);
    width: 100%;
    //height: 100px;
    height: 160px;
    color: #fff;
    padding: 0 15px;
    box-sizing: border-box;


    div {
      //line-height: 90px;
      color: #fff;
      padding-top: 30px;

      img {
        width: 60px;
        height: 60px;
        vertical-align: middle;
        border-radius: 50%;
        margin-right: 3px;
      }

      .right{
        top:9px;
        left:0;

        img{
          width: 64px;
          height: 17px;
          border-radius: unset;
        }

        .progress{
          top:5px;
          left:0;
          background: rgba(31,32,52,.2);
          width: 150px;
          height: 4px;
          border-radius: 2px;
          display: block;

          span{
            top:0;
            left:0;
            background: #ECD19F;
            //width: 30%;
            height: 100%;
            border-radius: 2px;
          }
        }

        .member{
          top:8px;
          left:0;
          font-size: 11px;
        }
      }


    }

    .vip-rule{
      position: absolute;
      top: 40px;
      right:0;
      background: #383942;
      width: 90px;
      height:40px;
      border-top-left-radius: 25px;
      border-bottom-left-radius: 25px;
      border: 2px solid #D1CBC1;
      border-right:none;
      color: #ECD19F;
      padding-top: 3px;
      box-sizing: border-box;
      overflow: hidden;

      .fliker-img{
        width: 62px;
        height: 40px;
        top: -2px;
        left: -50px;
        border-radius: 0;
        animation: flikerRemove 3.6s ease-in-out infinite normal;
        -webkit-animation: flikerRemove 3.6s ease-in-out infinite normal;
      }

      @keyframes flikerRemove {
        0%,83.3%{
          left:-50px;
        }
        84%{
          left:-50px;
        }
        100%{
          left: 90px;
        }
      }

      @-webkit-keyframes flikerRemove {
        0%,83.3%{
          left:-50px;
        }
        84%{
          left:-50px;
        }
        100%{
          left: 90px;
        }
      }

      .vip-day{
        font-size: 9px;
        color: #BBAF9A;
      }
    }
  }
  //*****头部*****

  //*****主题内容*****
  .content-box{
    position: relative;
    top: -40px;
    left:0;
    padding:0 15px;
    box-sizing: border-box;

    //*****部分信息展示*****
    .show-information{
      display: flex;
      width: 100%;
      height: 80px;
      padding: 18px 0 ;
      box-sizing: border-box;
      border-radius: 2px;

      div{
        flex: 1;

        i{
          position: absolute;
          right: 0;
          top: 6px;
          display: inline-block;
          width: 1px;
          height: 80%;
          border-left: 1px dashed #E8E8E8;
        }
      }
    }
    //*****部分信息展示*****

    //*****我的订单*****
    .my-order {
      height: auto;
      width: 100%;
      padding-left: 15px;
      border-radius: 2px;
      box-sizing: border-box;

      p:nth-child(1) {
        width: 100%;
        height: 44px;
        line-height: 44px;

        span {
          margin-right: 15px;

          i {
            position: relative;
            top: 1px;
            left: 0;
          }
        }
      }

      .order-type {
        padding-right: 15px;
        box-sizing: border-box;

        ul {
          display: flex;
          width: 100%;
          padding-bottom: 21px;;
          //height: 76px;

          li {
            width: 20%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            font-size: 12px;

            i {
              font-size: 28px;

              sup {
                top: 0;
                right: 16px;
                display: inline-block;
                background-color: #F54E4E;
                height: 15px;
                line-height: 15px;
                width: 15px;
                border: 1px solid #fff;
                border-radius: 50%;
                font-size: 12px;
                color: #fff;
              }

              .sup-type-1,
              .sup-type-2 {
                width: auto;
                padding: 1px 3px 0;
                border-radius: 8px;
                font-size: 10px;
                right: 10px;
              }
            }
          }
        }
      }
    }
    //*****我的订单*****

    //*****单元格*****
    //.cell-box{
    //
    //  ul{
    //    width: 100%;
    //    height: 100%;
    //
    //    li{
    //      padding-left:15px;
    //      box-sizing: border-box;
    //      height: 44px;
    //      line-height: 44px;
    //      width: 100% ;
    //
    //      .icon-left{
    //        font-size: 20px;
    //        position: relative;
    //        top: 2px;
    //        left: 0;
    //      }
    //
    //      .msg{
    //        width: calc(100% - 27px);
    //        height: 100%;
    //
    //        span{
    //          margin-right: 15px;
    //
    //          .iconfont{
    //            top:1px;
    //            left:0;
    //          }
    //        }
    //      }
    //    }
    //  }
    //
    //  .cell-1{
    //    height: 176px;
    //  }
    //}
    //*****单元格*****

    //*****其它模块入口*****
    .other-module{
      width: 100%;
      height:auto;
      border-radius: 2px;

      p{
        padding-top:16px;
      }

      ul{
        width: 100%;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 16px;

        li{
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 25%;
          height: 64px;
          //height: 82px;

          i{
            font-size: 30px;
            color: #7A7B82;
            //font-size: 32px;
            //color: #8982F9;
          }
        }
      }
    }
    //*****其它模块入口*****
  }

  .pop-comment{
    position: fixed;
    bottom: 65px;
    right:15px;
    background: #383942;
    width: auto;
    height: 36px;
    line-height: 36px;
    border-radius: 20px;
    padding:0 16px;
    color: #ECD19F;

    i.iconfont{
      font-weight: 600;
      font-size: 13px;
    }

    i.line{
      top: 3px;
      left: 0;
      display: inline-block;
      width: 1px;
      height: 40%;
      border-left: 1px solid #45454D;
      margin: 0 8px;
    }

    img{
      width: 16px;
      height: 16px;
      vertical-align: sub;
    }

    span{
      color: #fff;
    }
  }
}
